import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, Input, ConfigProvider, Button, message } from 'antd';
import { login } from '../../api/login';
import './index.less';

// 主题配置，用于自定义Ant Design组件的样式
const themeConfig = {
  components: {
    Form: {
      labelColor: '#fff' // 表单标签的颜色
    },
    Input: {
      colorBgContainer: "#161737", // 输入框背景颜色
      colorBorder: '#3a3e62', // 输入框边框颜色
      colorText: '#fff', // 输入框文本颜色
      colorIcon: '#fff', // 输入框图标颜色
      colorIconHover: '#fff', // 输入框图标悬停颜色
    }
  }
};

export const MyLogin = () => {
  const navigate = useNavigate(); // 获取编程式导航的函数

  // 登录提交函数
  const formSubmit = async (values) => {
    const { userName, password } = values; // 从表单值中解构出用户名和密码
    const res = await login({
      name: userName,
      password: window.SM4Util.encryptData_ECB(password) // 使用SM4加密密码
    });

    if (res.data) {
      let token = res.data.ownerId; // 获取token
      sessionStorage.setItem('token', token); // 将token存储到sessionStorage
      message.success('登录成功'); // 显示登录成功信息
      navigate('/'); // 导航到主页
    } else {
      message.error(res.msg); // 显示错误信息
    }
  };

  return (
    <ConfigProvider theme={themeConfig}>
      <div className='login-page'>
        <div className='login-header'>
          <div className='title'>
            <img src={require('../../assets/images/header/logo.png')} alt="" />
            <span className="title_name">空间服务管理</span>
          </div>
        </div>
        <div className='login-form'>
          <div className="title">登录</div>
          <div className="form">
            <Form labelAlign='right' labelCol={{ span: 4 }} size='large' onFinish={formSubmit}>
              {/* 用户名输入框 */}
              <Form.Item label='用户名' name='userName' colon={false} rules={[
                {
                  required: true,
                  message: '请输入用户名'
                }
              ]}>
                <Input />
              </Form.Item>
              {/* 密码输入框 */}
              <Form.Item label='密码' name='password' colon={false} rules={[
                {
                  required: true,
                  message: '请输入密码'
                }
              ]}>
                <Input.Password />
              </Form.Item>
              {/* 登录按钮 */}
              <Form.Item wrapperCol={{
                offset: 20,
                span: 4,
              }}>
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
}
